<template>
 <div>
	<div class="public_content bg-color-white index_content">
		<!--左侧部分的图加新闻块-->
		<div class="index_content_topic_left fl border_none">
			<!-- 轮播图 -->
			<div class="banner scroll po-re">
				<swiper :options="swiperOption" ref="mySwiper">
					<swiper-slide>
						<img src="~@/assets/img/banner-n.jpg" class="index_img">
						<span>学习宣传贯彻，党的十九大精神</span>
					</swiper-slide>
					<swiper-slide>
						<img src="~@/assets/img/banner2.jpg" class="index_img">
						<span>两学一做</span>
					</swiper-slide>
					<swiper-slide>
						<img src="~@/assets/img/banner3.jpg" class="index_img">
						<span>智慧党建数据大屏</span>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
					<div class="swiper-button-prev swiper-button-white swiper-button-hidden" slot="button-prev"></div><!--左箭头-->
					<div class="swiper-button-next swiper-button-white swiper-button-hidden" slot="button-next"></div><!--右箭头-->
				</swiper>
				
			</div>
			<!-- 党建要闻、党建论坛 -->
			<div class="index_content_topic_down mt-30 over-h">
				<div class="public_card index_content_topic_down_left fl">
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="pl-20 fsize-18">党建要闻</span> /
						<router-link :to="{path: `/index-list/${focusNewsId}`}" class="fcolor-white">更多</router-link>
					</div>
					<ul class="public_card_content">
						<li v-for="(item,index) in focusNewsList.slice(0, 10)" :key="index">
							<router-link :to="{path: `/news-detail/${item.id}`}"><span v-html="item.title"></span></router-link>
						</li>
					</ul>
				</div>
				<div class="public_card fr">
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="pl-20 fsize-18">党建论坛</span> /
						<router-link :to="{path: `/index-list/${forumId}`}" class="fcolor-white">更多</router-link>　
					</div>
					<ul class="public_card_content">
						<li v-for="(item,index) in forumList.slice(0, 10)" :key="index">
							<router-link :to="{path: `/news-detail/${item.id}`}"><span v-html="item.title"></span></router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--右侧部分的新闻块加功能块-->
		<div class="index_content_topic_right fr border_left">
			<!--今日首推-->
			<div class="public_card index_content_topic_right_top">
				<div class="public_card_title bg-img-card fcolor-white">
					<span class="pl-20 fsize-18">今日首推</span> /
					<router-link :to="{path: `/index-list/${pushTodayId}`}" class="fcolor-white">更多</router-link>
				</div>
				<ul class="public_card_content">
					<li v-for="(item,index) in pushTodayList.slice(0, 10)" :key="index">
						<router-link :to="{path: `/news-detail/${item.id}`}">
							<span v-html="item.title"></span>
						</router-link>
					</li>
				</ul>
			</div>
			<!-- 九宫格 功能区块-->
			<div class="grid">
				<div class="public_news_button index_content_topic_button">
						<div class="public_card_button index_card_button_dongtai">
								<router-link :to="{path: '/news'}">
										<div class="public_card_button_content">
												<div class="public_card_button_content_imgbox">
														<img src="~@/assets/img/index_dongtai.png" alt="基层动态">
												</div>
												<div class="public_card_button_txt">基层动态</div>
										</div>
								</router-link>
						</div>
						<div class="public_card_button index_card_button_gonggao">
								<router-link :to="{path: '/news'}">
										<div class="public_card_button_content">
												<div class="public_card_button_content_imgbox">
														<img src="~@/assets/img/index_gonggao.png" alt="志愿服务">
												</div>
												<div class="public_card_button_txt">志愿服务</div>
										</div>
								</router-link>
						</div>
						<div class="public_card_button index_card_button_tougao">
								<router-link :to="{path: ''}">
										<div class="public_card_button_content">
												<div class="public_card_button_content_imgbox">
														<img src="~@/assets/img/index_tougao.png" alt="党费收缴">
												</div>
												<div class="public_card_button_txt">党费收缴</div>
										</div>
								</router-link>
						</div>
				</div>
				<div class="public_news_button index_content_topic_button">
						<div class="public_card_button index_card_button_zaixian">
								<router-link :to="{path: '/studyCenter'}">
										<div class="public_card_button_content">
												<div class="public_card_button_content_imgbox">
														<img src="~@/assets/img/index_zaixian.png" alt="党建学习">
												</div>
												<div class="public_card_button_txt">党建学习</div>
										</div>
								</router-link>
						</div>
						<div class="public_card_button index_card_button_sanyan">
								<router-link :to="{path: '/seminar'}">
										<div class="public_card_button_content">
												<div class="public_card_button_content_imgbox">
														<img src="~@/assets/img/index_sanyan.png" alt="专题专栏">
												</div>
												<div class="public_card_button_txt">专题专栏</div>
										</div>
								</router-link>
						</div>
						<div class="public_card_button index_card_button_lianghui">
								<router-link :to="{path: '/meetingCenter'}">
										<div class="public_card_button_content">
												<div class="public_card_button_content_imgbox">
														<img src="~@/assets/img/index_lianghui.png" alt="党组换届">
												</div>
												<div class="public_card_button_txt">党组换届</div>
										</div>
								</router-link>
						</div>
				</div>
				<div class="public_news_button index_content_topic_button">
						<div class="public_card_button index_card_button_biji mb-0">
								<router-link :to="{path: '/meetingCenter'}">
										<div class="public_card_button_content">
												<div class="public_card_button_content_imgbox">
														<img src="~@/assets/img/index_biji.png" alt="工作汇报">
												</div>
												<div class="public_card_button_txt">工作汇报</div>
										</div>
								</router-link>
						</div>
						<div class="public_card_button index_card_button_wenjuan mb-0">
								<a href="https://www.xuexi.cn/">
									<div class="public_card_button_content">
											<div class="public_card_button_content_imgbox">
													<img src="~@/assets/img/index_study.png" alt="网上举报">
											</div>
											<div class="public_card_button_txt">学习强国</div>
									</div>
								</a>
						</div>
						<div class="public_card_button index_card_button_kaoshi mb-0">
								<router-link :to="{path: '/meetingCenter'}">
										<div class="public_card_button_content">
												<div class="public_card_button_content_imgbox">
														<img src="~@/assets/img/index_kaoshi.png" alt="积分考核">
												</div>
												<div class="public_card_button_txt">积分考核</div>
										</div>
								</router-link>
						</div>
				</div>
			</div>
		</div>
		<!--先锋榜样-->
		<div class="public_card w-all mt-30">
			<div class="public_card_title bg-img-card fcolor-white">
				<span class="fsize-18 pl-15">先锋榜样</span>
			</div>
			<ul class="mt-15">
				<li class="index-pioneer" v-for="(item,index) in VanguardExampleList.slice(0, 6)" :key="index">
					<div class="pioneer-pic">
						<img :src="item.image"/>
					</div>
					<div class="pioneer-box">
						<div class="pioneer-title">{{item.realname}}</div>
						<p class="pioneer-text line-overf text-l" v-html="item.content"></p>
						<div class="text-l">
							<router-link :to="{path: `/index-vanguard/${item.id}`}" class="pioneer-a">查看更多 >></router-link>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!--党员风采-->
		<div class="public_card w-all mt-30">
			<div class="public_card_title bg-img-card fcolor-white">
				<span class="fsize-18 pl-15">党员风采 </span> /
				<router-link :to="{path: `/index-list/${partyMienId}`}" class="fcolor-white">更多</router-link>
			</div>
			<ul class="mt-15">
				<li class="index-member" v-for="(item,index) in partyMienList.slice(0, 3)" :key="index">
					<div class="member-date">
						<div class="date">25</div>
						<div class="year-month">
							2018-12
						</div>
					</div>
					<div class="member-box">
						<div class="member-box-title">
							<router-link :to="{path: `/partyMien-detail/${item.id}`}">
								<span v-html="item.title"></span>
							</router-link>
						</div>
						<div class="member-box-text line-overf">
							<router-link :to="{path: `/partyMien-detail/${item.id}`}">{{item.detail}}</router-link>
						</div>
					</div>
					<div class="member-arrow">
						<router-link :to="{path: `/partyMien-detail/${item.id}`}">
							<img src="~@/assets/img/member-arrow.png"/>
						</router-link>
					</div>
				</li>
			</ul>
		</div>			
	</div>
	<!--两学一做图片-->
	<div class="w-all">
	    <img class="w-all" src="~@/assets/img/index_liangxueyizuo.jpg" alt="两学一做图片">
	</div>
	<!--风采新闻区-->
	<div class="public_content bg-color-white index_content">
		<div class="index_content_mix mt-30">	
			<div class="public_card">
				<div class="public_card_title bg-img-card fcolor-white">
					<span class="pl-15 fsize-18">组织动态</span> /
					<router-link :to="{path: `/index-list/${organizationalDynamicsId}`}" class="fcolor-white">更多</router-link>　
				</div>
				<ul class="public_card_content">
					<li v-for="(item,index) in organizationalDynamics.slice(0, 5)" :key="index">
						<router-link :to="{path: `/news-detail/${item.id}`}">
							<span v-html="item.title"></span>
						</router-link>
					</li>
				</ul>	
			</div>	
			<div class="public_card">
				<div class="public_card_title bg-img-card fcolor-white">
					<span class="pl-15 fsize-18">党建先锋</span> /　
					<router-link :to="{path: `/index-list/${partyPioneerId}`}" class="fcolor-white">更多</router-link>
				</div>
				<ul class="public_card_content">
					<li v-for="(item,index) in partyPioneerList.slice(0, 5)" :key="index">
						<router-link :to="{path: `/news-detail/${item.id}`}"><span v-html="item.title"></span></router-link>
					</li>
				</ul>	
			</div>
			<div class="public_card">
				<div class="public_card_title bg-img-card fcolor-white">
					<span class="pl-15 fsize-18">党纪党规</span> /
					<router-link :to="{path: `/index-list/${partyRulesId}`}" class="fcolor-white">更多</router-link>　
				</div>
				<ul class="public_card_content">
					<li v-for="(item,index) in partyRulesList.slice(0, 5)" :key="index">
						<router-link :to="{path: `/news-detail/${item.id}`}">
							<span v-html="item.title"></span>
						</router-link>
					</li>
				</ul>	
			</div>
		</div>
		<div class="index_content_mix mt-20">	
			<div class="public_card">
				<div class="public_card_title bg-img-card fcolor-white">
					<span class="pl-15 fsize-18">党建动态</span> /　
					<router-link :to="{path: `/index-list/${partyDynamicId}`}" class="fcolor-white">更多</router-link>
				</div>
				<ul class="public_card_content">
					<li v-for="(item,index) in partyDynamicList.slice(0, 5)" :key="index">
						<router-link :to="{path: `/news-detail/${item.id}`}">
							<span v-html="item.title"></span>
						</router-link>
					</li>
				</ul>	
			</div>	
			<div class="public_card">
				<div class="public_card_title bg-img-card fcolor-white">
					<span class="pl-15 fsize-18">红色文艺</span> /
					<router-link :to="{path: `/index-list/${redLiteratureId}`}" class="fcolor-white">更多</router-link>　
				</div>
				<ul class="public_card_content">
					<li v-for="(item,index) in redLiteratureList.slice(0, 5)" :key="index">
						<router-link :to="{path: `/news-detail/${item.id}`}">
							<span v-html="item.title"></span>
						</router-link>
					</li>
				</ul>	
			</div>
			<div  class="w-380 h-230 over-h pull-right">
			    <img src="~@/assets/img/index_ganbuwangping.jpg" class="di-b w-all" alt="最新干部王评图片">
			</div>
		</div>		
		<!--文章资料库区-->
		<div class="public_card index_content_books w-all mt-30">
			<div class="public_card_title bg-img-card fcolor-white">
				<span class="pl-15 fsize-18">文章资料库</span>　
			</div>
			<ul class="public_card_text_content">
		    <li class="public_card_text_lr mt-20 w-280 mr-5">
					<router-link :to="{path: `/studyCente-detail`}">
		        <div class="public_card_text_lr_img hr-s-dfdfdf h-all pull-left w-120 mr-15">
		          <div class="w-all h-all over-h">
		            <img src="~@/assets/img/5ae9366230306.jpg" class="di-b h-all center-block" alt="图书图片">
		          </div>
		        </div>
		        <div class="public_card_text_lr_txt">
							<div class="mb-20 material_over_point">atnc学习资料</div>
							<div class="public_card_text_lr_txt_content fcolor-99">作者：</div>
							<div class="public_card_text_lr_txt_content fcolor-99">时间：2018-01-26</div>
							<div class="mt-40">
								<span class="public_card_text_lr_txt_content fcolor-99"></span>
								<span class="public_card_text_lr_txt_content fcolor-99">人浏览</span>
								<span class="public_card_text_lr_btn">点击阅读</span>
							</div>
		        </div>
					</router-link>
				</li>
				<li class="public_card_text_lr mt-20 w-280 mr-5">
					<router-link :to="{path: `/studyCente-detail`}">
				    <div class="public_card_text_lr_img hr-s-dfdfdf h-all pull-left w-120 mr-15">
				      <div class="w-all h-all over-h">
				        <img src="~@/assets/img/5aded4967c854.jpg" class="di-b h-all center-block" alt="图书图片">
				      </div>
				    </div>
				    <div class="public_card_text_lr_txt">
							<div class="mb-20 material_over_point">atnc学习资料</div>
							<div class="public_card_text_lr_txt_content fcolor-99">作者：</div>
							<div class="public_card_text_lr_txt_content fcolor-99">时间：2018-01-26</div>
							<div class="mt-40">
								<span class="public_card_text_lr_txt_content fcolor-99"></span>
								<span class="public_card_text_lr_txt_content fcolor-99">人浏览</span>
								<span class="public_card_text_lr_btn">点击阅读</span>
							</div>
				    </div>
					</router-link>
				</li>
				<li class="public_card_text_lr mt-20 w-280 mr-5">
					<router-link :to="{path: `/studyCente-detail`}">
				    <div class="public_card_text_lr_img hr-s-dfdfdf h-all pull-left w-120 mr-15">
				      <div class="w-all h-all over-h">
				        <img src="~@/assets/img/5adea4172169d.jpg" class="di-b h-all center-block" alt="图书图片">
				      </div>
				    </div>
				    <div class="public_card_text_lr_txt">
							<div class="mb-20 material_over_point">atnc学习资料</div>
							<div class="public_card_text_lr_txt_content fcolor-99">作者：</div>
							<div class="public_card_text_lr_txt_content fcolor-99">时间：2018-01-26</div>
							<div class="mt-40">
								<span class="public_card_text_lr_txt_content fcolor-99"></span>
								<span class="public_card_text_lr_txt_content fcolor-99">人浏览</span>
								<span class="public_card_text_lr_btn">点击阅读</span>
							</div>
				    </div>
					</router-link>
				</li>
				<li class="public_card_text_lr mt-20 w-280 mr-5">
					<router-link :to="{path: `/studyCente-detail`}">
				    <div class="public_card_text_lr_img hr-s-dfdfdf h-all pull-left w-120 mr-15">
				      <div class="w-all h-all over-h">
				        <img src="~@/assets/img/5adea384d7e06.jpg" class="di-b h-all center-block" alt="图书图片">
				      </div>
				    </div>
				    <div class="public_card_text_lr_txt">
							<div class="mb-20 material_over_point">atnc学习资料</div>
							<div class="public_card_text_lr_txt_content fcolor-99">作者：</div>
							<div class="public_card_text_lr_txt_content fcolor-99">时间：2018-01-26</div>
							<div class="mt-40">
								<span class="public_card_text_lr_txt_content fcolor-99"></span>
								<span class="public_card_text_lr_txt_content fcolor-99">人浏览</span>
								<span class="public_card_text_lr_btn">点击阅读</span>
							</div>
				    </div>
					</router-link>
				</li>
			</ul>
		</div>	
		<!--视频资料库区-->
		<div class="public_card index_content_video w-all mt-30">
			<div class="public_card_title bg-img-card fcolor-white">
				 <span class="fsize-18 pl-15">视频资料库</span>
			</div>
			<ul class="mt-15">
				<li>
					<router-link :to="{path: `/studyCente-detail`}" class="see-details">
		        <div class="po-re index_content_video_mask">
		            <div class="po-ab">南通党建</div>
		            <img class="di-b" src="~@/assets/img/5ae9352377a6c.jpg" alt="视频图片">
		        </div>
					</router-link>
				</li>
				<li>
					<router-link :to="{path: `/studyCente-detail`}" class="see-details">
				    <div class="po-re index_content_video_mask">
				        <div class="po-ab">学习资料整理第二卷内容速览</div>
				        <img class="di-b" src="~@/assets/img/5ae9353b083ac.jpg" alt="视频图片">
				    </div>
					</router-link>
				</li>
				<li>
					<router-link :to="{path: `/studyCente-detail`}" class="see-details">
				    <div class="po-re index_content_video_mask">
				        <div class="po-ab">“智慧党建”升级</div>
				        <img class="di-b" src="~@/assets/img/5ae93549d4c7b.jpg" alt="视频图片">
				    </div>
					</router-link>
				</li>
			</ul>
		</div>		
	</div>
 </div>	
</template>

<script>
	import '@/assets/css/common.css';
	import 'swiper/dist/css/swiper.min.css';
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
	name: 'index',
	components: { 
		swiper, 
		swiperSlide 
	},
	data () {
		return {
			pushTodayId:'039137fe6198466a85728ff7f99f2126',
			pushTodayList:[],//今日首推
			focusNewsId:'221a19008fcd4b17b6780febb0f088b8',
			focusNewsList:[],// 党建要闻
			forumId:'252da2668d754cdf9201349bedc3d507',
			forumList:[],   //党建论坛
			VanguardExampleList:[],// 先锋榜样
			partyMienId:'053551262afe4085b04c2f8d9ce06d60',
			partyMienList:[],// 党员风采	
			organizationalDynamicsId:'3ee854e819d84a7ab41abb98dbf9ecda',
			organizationalDynamics:[], //组织动态
			partyPioneerId:'afaa7a15198d4d1bb96094087322886e',
			partyPioneerList:[],//党建先锋
			partyRulesId:'6d276e7572d8410ab43af4166ca615e3',
			partyRulesList:[],//党纪党规
			partyDynamicId:'f38aa9a5322f466ba8cbaffe0ae36729',
			partyDynamicList:[],//党建动态
			redLiteratureId:'2',
			redLiteratureList:[],//红色文艺 
			swiperOption: { 
	         	slidesPerView: 'auto', 
	         	centeredSlides: true, 
	         	paginationClickable: true,
	         	autoplay:{
					disableOnInteraction:false
				},
				speed: 1000,
	         	loop:true,
				autoplayDisableOnInteraction:false,
				pagination : {
					el: '.swiper-pagination',
					type: 'bullets',
					clickable: true
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
					hideOnClick: true
				}
	      	},
		}
	},
	computed: {   
		swiper() { 
		  return this.$refs.mySwiper.swiper; 
		} 
	},
	mounted() {
		this.init();
	},
	methods: {
		init(){
			this.$parent.$data.current = 0
			this.getNewsData()  //所有新闻列表
			this.getVanguardExampleData()  //先锋榜样
		},
		//所有新闻列表
		getNewsData(){
			this.$axios.get(`web/article/articleList`).then(res => {
				if(res.data && res.data.code === 0){
					res.data.data.map((item)=>{
						//今日首推
						if(item.id == this.pushTodayId){
							this.pushTodayList = item.articleEntity
						}
						//党员风采
						if(item.id == this.partyMienId){
							this.partyMienList = item.articleEntity
						}
						//红色文艺
						if(item.id == this.redLiteratureId){
							this.redLiteratureList = item.articleEntity
						}
						//党建要闻
						if(item.id == this.focusNewsId){
							this.focusNewsList = item.articleEntity
						}
						//党建论坛
						if(item.id == this.forumId){
							this.forumList = item.articleEntity
						}
						//组织动态
						if(item.id == this.organizationalDynamicsId){
							this.organizationalDynamics = item.articleEntity
						}
						//党纪党规
						if(item.id == this.partyRulesId){
							this.partyRulesList = item.articleEntity
						}
						//党建先锋
						if(item.id == this.partyPioneerId){
							this.partyPioneerList = item.articleEntity
						}
						//党建动态
						if(item.id == this.partyDynamicId){
							this.partyDynamicList = item.articleEntity
						}
					})
				}else {
					this.$message.error(res.data.msg)
				}		
				
			})
		},
		//先锋榜样
		getVanguardExampleData(){
			this.$axios.get(`web/showuser/list`).then(res => {
				if(res.data && res.data.code === 0){
					this.VanguardExampleList = res.data.data
				}else {
					this.$message.error(res.data.msg)
				}
			})		
		}		
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.index_content_topic_left{
		 width: 63.33%;
	}
/* 首页上部新闻区右侧样式 */
.index_content_topic_right{
    width: 34%;
}
.index_content_topic_right_top{
    height: 415px;
    width: 404px;
}
	.index_content_topic_down > div:nth-child(1){
		margin-right: 20px;
	}
	.index_content_topic_down > div:nth-child(1), .index_content_topic_down > div:nth-child(2){
		width: calc( (100% - 28px) / 2 );
	}
		
	ul.public_card_content, ol.public_card_content{
    padding-left: 22px;
	}
	ol.public_card_content > li{
    display: list-item;
    list-style: decimal;
    width: 100%;
    vertical-align: top;
}
ul.public_card_content, ul.public_card_content > li{
    list-style: disc;
    color: #d9d9d9;
}
.public_card{
    display: inline-block;
    width: 100%;
}	
.index_content_mix .public_card{
	height: 200px;
	overflow: hidden;
}
.index_content_topic_down .public_card{
	height: 350px;
}
.index_content_topic_right .public_card{
	height: 415px;
}
.index_content_topic_right_top .public_card_content li{
	 line-height: 35px;
	 text-align: left;
}
.index_content_topic_down .public_card_content li,
.index_content_mix .public_card_content li{
	line-height: 30px;
	text-align: left;
}
.public_card_content > li{
    font-size: 14px;
}
.public_card_content a{
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.public_card_content li{
    counter-increment: chapter;
}
.public_card_content a:before{
}
.public_card_content li:hover > a{
    color: #ff3032;
}
	/* 轮播图 */
	
	.banner img{
		display: block;
		width: 100%;
		height: auto;
	}
	.banner .swiper-container span{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 48px;
		line-height: 24px;
		background: linear-gradient(to top, #000, transparent);
		color: #fff;
		text-align: center;
	}
	.swiper-container .swiper-button-hidden{ 
		opacity : 0;
	}
	.swiper-container:hover .swiper-button-hidden{ 
		opacity : 1;
	}
	/* 轮播图结束 */
	/* 登录 */
	.index_login{
		overflow: hidden;
	}
	.index-logincon{
		border: 1px solid #dedede;
		/* background-color: #fafafa; */
	}
	#code{
	    font-family:Arial;
	    font-style:italic;
	    font-weight:bold;
	    border:0;
	    letter-spacing:2px;
	    color:#c50c11;
	    font-size: 20px;
	}
	.login-input{
		display:block;
		overflow: hidden;
		width:100%;
		height:40px;
		line-height:40px;
		margin-bottom: 20px;
		border: none;
		text-indent:10px;
		vertical-align: middle;
	}
	.index-logincon input:focus{
		border-color: #de8385;outline:0;background:#fef7f8;
	}
	input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
		color:#7c7c7c;
	}
	input:-moz-placeholder ,textarea:-moz-placeholder,
	input::-moz-placeholder,textarea::-moz-placeholder,
	input:-ms-input-placeholder,textarea:-ms-input-placeholder{
		color:#7c7c7c;
	}
	.login-yanz{
		width:230px;
		height:40px;
		line-height:40px;
		margin-bottom: 20px;
		border: none;
		text-indent:10px;
	}
	.captcha{
		width: 160px;
		height: 42px;
		margin-left: 5px;
		border: 1px solid #ccc;
		cursor:pointer;
	}
	.login-submit{
		display:block;
		overflow: hidden;
		width:100%;
		height:45px;
		line-height:45px;
		background:#c50c11;
		text-align:center;color: #fff;
		border: none;font-size: 16px;cursor:pointer;
	}
	.login-submit:hover{
		background:#d32a2f;color: #fff;
	}
	.captcha-refresh{
		width: 70px;
		float: left;
		line-height: 40px;
		font-size: 16px;
		outline: 0px none;
		color: #ee702c;
	}
	.login-zc,.login-wj{
		width:80px;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
		color:#666;
	}
	.login-zc:hover,.login-wj:hover{
		color:#c50c11;
		cursor: pointer;
	}
	/* 登录结束 */
	.public_card_button{
    display: inline-block;
    position: relative;
    width: 110px;
    height: 110px;
    border: solid 1px #dfdfdf;
    background: #f8f4eb no-repeat center 34%;
    vertical-align: text-bottom;
    color: #999;
    font-size: 14px;
}
.index_content_topic_button > div{
    margin-bottom: 12px;
}
.index_content_topic_button > div:nth-child(1), .index_content_topic_button > div:nth-child(2){
    margin-right: 8px;
}
.public_card_button:hover{
    /*margin-top: -14px;*/
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    transition: .4s;
}
.public_card_button > a{
    display: table-cell;
    width: 110px;
    height: 110px;
    color: #999;
    vertical-align: middle;
}
.public_card_button .public_card_button_content{
    min-height: 78px;
    min-width: 62px;
    /*margin: auto;*/
}
.public_card_button .public_card_button_content .public_card_button_content_imgbox{
    margin: 0 auto;
    height: 47px;
    width: 47px;
    overflow: hidden;
}
.public_card_button_content .public_card_button_content_imgbox > img{
    height: 47px;
}
.public_card_button .public_card_button_txt{
    text-align: center;
    margin-top: 12px;
}
/* 先锋榜样 */
.index-pioneer{
	float: left;
	width:338px;
	height:300px;
	margin-right:73px;
	margin-top:10px ;
	background:url(~@/assets/img/pioneer_bg.png) no-repeat left bottom;
}
.index-pioneer:nth-child(3n){
	margin-right:0px;
}
.pioneer-pic{
	text-align: center;
}
.pioneer-pic img {
	width: 90px;
	height: 120px;
}
.pioneer-title{
	text-align: center;
	color: #ff6600;
	font-size: 20px;
	
}
.pioneer-box{
	padding:16px 20px 22px;
}
.pioneer-text{
	height: 75px;
	line-height: 25px;
	margin-top:10px;
	margin-bottom:15px;
	color: #333;
	font-size: 16px;
	text-indent: 2em;
}
.pioneer-a{
	color: #950000;
}
.pioneer-a:hover{
	color: #ff6600;
}
/* 党员风采 */
.index-member{
	height: 100px;
	padding: 20px;
	background:#fff;
	border-radius: 10px;
	display: flex;
	margin-bottom:20px;
}
.member-date{
	width:80px;
	height:100%;
	margin-left:20px;
	/*background:#f60 ;*/
	/*float: left;*/
}
.member-date .date{
	color:#f7a33a;
	font-size:60px;
}
.member-date .year-month{
	color: #999;
	text-align: center;
}
.member-box{
	width:850px;
	margin-left: 25px;
	text-align: left;
}
.member-box a span{
	color:#333;
	font-size:20px;
	font-weight: bold;
}
.member-box-text{
	margin-top: 10px;
    height: 75px;
	line-height: 25px;
}
.member-box-text a{
	font-weight: normal;
	font-size:16px
}
.member-arrow{
	margin-left:50px;
	margin-top:25px
}
.study_topic_content{
	width:820px;
}
/* 风采新闻区样式 */
.index_content_mix > div{
    width: calc( (100% - 39px) / 3 );
}
.index_content_mix > div:nth-child(1),.index_content_mix > div:nth-child(2){
    margin-right: 15px;
}
.index_content_mix .public_card_news_content li{
    line-height: 28px;
}
.index_content_mix .public_card_news_content a{
    font-size: 12px;
}
/* 文章资料区样式 */
.index_content_books .public_card_text_content{
    margin-top: -2px;
}
.public_card_text_lr{
    display: inline-block;
		width: 284px;
    height: 162px;
		margin-right: 5px;
}
.public_card_text_content .public_card_text_lr:last-child{
	margin-right: 0px;
}
.public_card_text_lr:hover{
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.14);
}
.public_card_text_lr > a{
    display: block;
    height: 100%;
    width: 100%;
		border: 1px solid #dfdfdf;
}
.public_card_text_lr_img{
    box-sizing: border-box;
    padding: 4px;
		border:none
}
.public_card_text_lr_txt{
    height: 162px;
    box-sizing: border-box;
    padding: 6px 16px 12px 12px;
    font-size: 14px;
    color: #333;
		text-align: left;
}
.public_card_text_lr_txt_content{
	line-height: 22px;
    font-size: 12px;
}
.public_card_text_lr_btn{
    float: right;
    display: inline-block;
    width: 64px;
    height: 24px;
    text-align: center;
    line-height: 22px;
    border-radius: 3px;
    color: #fff;
    background: #ff3032;
}
.material_over_point {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 文章资料区样式结束 */
/* 视频资料区开始 */
.index_content_video > ul > li{
    display: inline-block;
    height: 198px;
    width: calc( (100% - 30px) / 3 );
    margin-right: 10px;
    overflow: hidden;
}
.index_content_video > ul > li:hover .index_content_video_mask > div{
    color: #fff;
    background: rgb(194,12,12);
    filter: alpha(opacity=65);
    opacity: .65;
}
.index_content_video > ul > li:nth-last-child(1){
    margin-right: 0;
}
.index_content_video > ul a{
    display: block;
    width: 100%;
    height: 100%;
}
.index_content_video .index_content_video_mask > div{
    box-sizing: border-box;
    color: transparent;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0 12%;
    padding-top: 18%;
    vertical-align: text-bottom;
}
/* 视频资料区结束 */
</style>
